<template>
  <div class="home">
    <el-container>
      <el-header style="background-color: #fff;height: 80px;">
        <div style="width: 1200px;margin: 0 auto;">
          <el-row :gutter="20">
            <el-col :span="6">
              <a href="javascript:void(0)" @click="home()">
                <img src="/imgs/icon.png" width="200px">
              </a>
            </el-col>
            <el-col :span="10">
                <el-menu mode="horizontal" @select="selectFoodContents"  active-text-color="orange">
                  <el-menu-item index="0">首页</el-menu-item>
                  <el-menu-item index="1">食谱</el-menu-item>
                  <el-menu-item index="5">视频</el-menu-item>
                  <el-menu-item index="8">资讯</el-menu-item>
                </el-menu>
            </el-col>
            <el-col :span="6">
                <el-input v-model="title" placeholder="请输入你的关键字" style="position: relative;top:20px;" >
                  <el-button @click="likeContentsByTitle()" slot="append"  icon="el-icon-search"></el-button>
                </el-input>

            </el-col>

            <el-col :span="2">
              <el-popover  v-if="user == null"
                  placement="top-start"
                  title="欢迎来到烘焙坊"
                  width="200"
                  trigger="hover"
                  >
                  <i style="font-size:30px;position:relative;top:20px;"
                     slot="reference" class="el-icon-user"></i>
                  <el-button type="info" @click="reg()">注册</el-button>
                  <el-button type="primary" @click="login()">登录</el-button>
              </el-popover>

              <el-popover v-else
                  placement="top-start"
                  title="欢迎来到烘焙坊"
                  width="200"
                  trigger="hover"

              >
                <i style="font-size:30px;position:relative;top:20px;"
                   slot="reference" class="el-icon-user"></i>
               <div style="width: 100%;text-align: center;" >
                 <el-avatar :size="50" :src="this.BASE_URL+user.imgUrl"></el-avatar>
                 <br/>
                 <a href="javascript:void(0)" @click="personalIndex()">个人中心</a>
                 <a href="javascript:void(0)" @click="logout()">退出登录</a>
                 <br>
                 <a href="javascript:void(0)"  v-if="user.isAdmin == 1" >后台管理页面</a>
               </div>
              </el-popover>

            </el-col>



          </el-row>
        </div>
      </el-header>

      <el-main>
          <router-view></router-view>
      </el-main>

      <el-footer style="background-color: black;height: 280px;padding:50px;">
          <div style="width: 1200px;margin: 0 auto;color: #666;text-align:center;">
            <el-row>
              <el-col :span="8">
                <img src="/imgs/icon.png"/>
                <p>教程灵感就看烘焙坊</p>

                <p> 烘焙行业网络社区平台</p>

                <p>全国百城上千个职位等你来</p>
              </el-col>
              <el-col :span="8" id="footer_center">
                <el-col :span="8" >
                  <h3>关于我们</h3>
                  <p>烘焙学院</p>

                  <p> 烘焙食谱</p>

                  <p> 分类信息</p>

                  <p> 求职招聘</p>

                  <p> 社区交流</p>
                </el-col>
                <el-col :span="8">
                  <h3>服务与支持</h3>
                  <p>联系我们</p>

                  <p>广告投放</p>

                  <p>用户协议</p>

                  <p>友情链接</p>

                  <p> 在线反馈</p>

                  <p> 我发投稿</p>


                </el-col>
                <el-col :span="8">
                  <h3>底部导航</h3>
                  <p>Archiver</p>

                  <p>手机版</p>

                  <p> 小黑屋</p>
                </el-col>
              </el-col>
              <el-col :span="8">
                <h1 style="font-size: 60px;margin:0px;
                  ">
                  <span style="color: orange">烘焙</span>坊</h1>
                <p style="margin:0px;">烘焙行业社区平台</p>
              </el-col>
            </el-row>
          </div>
      </el-footer>
    </el-container>
  </div>
</template>

<script>

export default {
  data() {
    return {
      user:localStorage.user ? JSON.parse(localStorage.user):null,
      title:''
    }
  },
  methods: {
    home() {
      //if(this.$route.path != '/')
        this.$router.push("/")

    },
    reg() {
      //判断当前是否在注册页面 如果不再注册页面跳转到注册页面 如果在注册页面不需要跳转
      //if(this.$route.path != '/reg')
        this.$router.push("/reg")
    },
    login() {
      //if(this.$route.path != '/login')
       this.$router.push("/login")
    },
    personalIndex(){
      this.$router.push("/personal/index")
    },
    logout(){
      //将localStorage中的数据清除
      localStorage.clear()
      this.user = null
      //页面跳转到首页
      this.$router.push("/")
    },
    selectFoodContents(key){
        //console.log(key)
      if(key == 0 ){
        this.$router.push('/')
        return
      }
      this.$router.push('/list?type='+ key)
    },
    likeContentsByTitle(){
      this.$router.push('/list?title='+this.title)
    }




  },

}
</script>

<style>
  #footer_center h3{
    color: #fff;
  }
  #footer_center p{
    margin: 0;
  }
</style>
